Frontend Mikro-Frontend Router: Alkalmazások közötti navigáció

A modern webfejlesztésben a mikro-frontend architektúra jelentős népszerűségre tett szert a nagy, összetett alkalmazások építésének egyik módjaként. Ez magában foglalja a monolitikus frontend felosztását kisebb, független és telepíthető egységekre (mikro-frontends). Ennek az architektúrának az egyik központi kihívása az alkalmazások közötti navigáció kezelése, amely lehetővé teszi a felhasználók számára, hogy zökkenőmentesen mozogjanak ezen független mikro-frontends között. Ez a cikk átfogó útmutatót nyújt a frontend mikro-frontend routinghoz és az alkalmazások közötti navigációhoz.

Mik azok a Mikro-Frontends?

A mikro-frontends egy olyan architekturális stílus, ahol a függetlenül szállítható frontend alkalmazások egyetlen, összefüggő felhasználói élményt alkotnak. Ez analóg a háttérben található mikroszolgáltatásokkal. Minden mikro-frontend tipikusan egy külön csapat tulajdonában van, ami nagyobb autonómiát, gyorsabb fejlesztési ciklusokat és egyszerűbb karbantartást tesz lehetővé. A mikro-frontends előnyei a következők:

• Független telepítés: A csapatok anélkül telepíthetik a mikro-frontendjeiket, hogy az alkalmazás más részeire hatással lennének.
• Technológiai sokféleség: Különböző mikro-frontends építhetők különböző technológiákkal, lehetővé téve a csapatok számára, hogy kiválasszák a munkához legmegfelelőbb eszközt. Például egy csapat React-et használhat, míg egy másik Vue.js-t vagy Angulart.
• Skálázhatóság: Az alkalmazás könnyebben skálázható, mivel minden mikro-frontend külön-külön skálázható.
• Jobb karbantarthatóság: A kisebb kódbázisok könnyebben érthetők és karbantarthatók.
• Csapat autonómiája: A csapatok nagyobb kontrollt gyakorolnak a saját kódjuk és fejlesztési folyamatuk felett.

A Mikro-Frontend Router szükségessége

Jól definiált routing stratégia nélkül a felhasználók széteső és frusztráló élményben részesülnek a mikro-frontends közötti navigálás során. A mikro-frontend router ezt úgy kezeli, hogy központi mechanizmust biztosít a navigáció kezelésére az egész alkalmazásban. Ez magában foglalja a következőket:

• URL-kezelés: Biztosítja, hogy az URL pontosan tükrözze a felhasználó aktuális helyét az alkalmazáson belül.
• Állapotkezelés: Szükség esetén állapot megosztása a mikro-frontends között.
• Lusta betöltés: A mikro-frontends betöltése csak akkor, ha szükség van rájuk a teljesítmény javítása érdekében.
• Hitelesítés és engedélyezés: Felhasználói hitelesítés és engedélyezés kezelése a különböző mikro-frontends között.

Alkalmazások közötti navigációs stratégiák

Több megközelítés is létezik az alkalmazások közötti navigáció megvalósítására egy mikro-frontend architektúrában. Mindegyik megközelítésnek megvannak a maga előnyei és hátrányai, és a legjobb választás az alkalmazás konkrét követelményeitől függ.

1. Központi Router használata (Single-Spa)

A Single-Spa egy népszerű keretrendszer a mikro-frontends építéséhez. Központi routert használ a különböző alkalmazások közötti navigáció kezelésére. A fő alkalmazás a karmesterként működik, és felelős a mikro-frontends rendereléséért és leválasztásáért az aktuális URL alapján.

Hogyan működik:

1. A felhasználó egy adott URL-re navigál.
2. A single-spa router elfogja az URL-változást.
3. Az URL alapján a router meghatározza, melyik mikro-frontend legyen aktív.
4. A router aktiválja a megfelelő mikro-frontendet, és leválasztja az összes többi aktív mikro-frontendet.

Példa (Single-Spa):

Tegyük fel, hogy három mikro-frontendje van: home, products és cart. A single-spa router a következőképpen lenne konfigurálva:

import { registerApplication, start } from 'single-spa'; registerApplication( 'home', () => import('./home/home.app.js'), location => location.pathname === '/' ); registerApplication( 'products', () => import('./products/products.app.js'), location => location.pathname.startsWith('/products') ); registerApplication( 'cart', () => import('./cart/cart.app.js'), location => location.pathname.startsWith('/cart') ); start();

Ebben a példában minden mikro-frontend regisztrálva van a single-spa-val, és egy függvényt biztosítanak annak meghatározására, hogy a mikro-frontend mikor legyen aktív az URL alapján. Amikor a felhasználó a /products oldalra navigál, a products mikro-frontend aktiválódik.

Előnyök:

• Központosított vezérlés a routing felett.
• Egyszerűsített állapotkezelés (a single-spa karmester kezelheti).
• Könnyen integrálható a meglévő alkalmazásokkal.

Hátrányok:

• Egyetlen hibaforrás. Ha a karmester leáll, az egész alkalmazás érintett.
• Teljesítmény szűk keresztmetszetté válhat, ha nem hatékonyan valósítják meg.

2. Modul Föderáció (Webpack 5)

A Webpack 5 Module Federation lehetővé teszi a kód megosztását a különböző Webpack build-ek között futásidőben. Ez azt jelenti, hogy komponenseket, modulokat vagy akár egész alkalmazásokat is exponálhat egy build-ből (a hostból) egy másikba (a remote-ba). Ez megkönnyíti a mikro-frontends építését, ahol minden mikro-frontend egy külön Webpack build.

Hogyan működik:

1. Minden mikro-frontend külön Webpack projektként épül fel.
2. Az egyik mikro-frontend host alkalmazásként van kijelölve.
3. A host alkalmazás meghatározza, mely modulokat kívánja felhasználni a remote mikro-frontends-ből.
4. A remote mikro-frontends meghatározza, mely modulokat kívánja exponálni a host alkalmazás számára.
5. Futásidőben a host alkalmazás betölti az exponált modulokat a remote mikro-frontends-ből szükség szerint.

Példa (Modul Föderáció):

Tegyük fel, hogy van egy host alkalmazás és egy remote alkalmazás.

host/webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container; module.exports = { // ... plugins: [ new ModuleFederationPlugin({ name: 'host', remotes: { remote: 'remote@http://localhost:3001/remoteEntry.js', }, shared: ['react', 'react-dom'], }), ], };

remote/webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container; module.exports = { // ... plugins: [ new ModuleFederationPlugin({ name: 'remote', exposes: { './Button': './src/Button', }, shared: ['react', 'react-dom'], }), ], };

Ebben a példában a host alkalmazás felhasználja a Button komponenst a remote alkalmazásból. A shared opció biztosítja, hogy mindkét alkalmazás ugyanazt a verziót használja a react és react-dom könyvtárakból.

Előnyök:

• Decentralizált architektúra. Minden mikro-frontend független, és külön-külön fejleszthető és telepíthető.
• Kódmegosztás. A Modul Föderáció lehetővé teszi a kód megosztását a különböző alkalmazások között futásidőben.
• Lusta betöltés. A modulok csak akkor töltődnek be, ha szükség van rájuk, javítva a teljesítményt.

Hátrányok:

• Bonyolultabb beállítani és konfigurálni, mint a single-spa.
• Gondos kezelést igényel a megosztott függőségek elkerülése érdekében a verzióütközések elkerülése érdekében.

3. Web Komponensek

A Web Komponensek egy olyan webes szabványok halmaza, amelyek lehetővé teszik az újrafelhasználható egyéni HTML elemek létrehozását. Ezek a komponensek bármilyen webalkalmazásban használhatók, függetlenül a használt keretrendszertől. Ez természetes választássá teszi őket a mikro-frontend architektúrákhoz, mivel technológia-agnosztikus módot biztosítanak a UI komponensek építésére és megosztására.

Hogyan működik:

1. Minden mikro-frontend UI-ját Web Komponensek halmazaként teszi elérhetővé.
2. A fő alkalmazás (vagy egy másik mikro-frontend) felhasználja ezeket a Web Komponenseket úgy, hogy importálja és használja őket a HTML-jében.
3. A Web Komponensek kezelik a saját renderelésüket és logikájukat.

Példa (Web Komponensek):

micro-frontend-a.js:

class MyComponent extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = `

Hello from Micro-Frontend A!

`; } } customElements.define('micro-frontend-a', MyComponent);

index.html (fő alkalmazás):

Main Application

Ebben a példában a micro-frontend-a.js fájl egy micro-frontend-a nevű Web Komponenst definiál. Az index.html fájl importálja ezt a fájlt, és használja a Web Komponenst a HTML-jében. A böngésző rendereli a Web Komponenst, és megjeleníti a "Hello from Micro-Frontend A!" szöveget.

Előnyök:

• Technológia-agnosztikus. A Web Komponensek bármilyen keretrendszerrel vagy keretrendszer nélkül is használhatók.
• Újrafelhasználhatóság. A Web Komponensek könnyen újrafelhasználhatók a különböző alkalmazásokban.
• Kapszulázás. A Web Komponensek kapszulázzák a saját stílusaikat és logikájukat, megakadályozva az ütközéseket az alkalmazás más részeivel.

Hátrányok:

• Bőbeszédűbb lehet a megvalósítás, mint más megközelítések.
• Polyfilleket igényelhet a régebbi böngészők támogatásához.

4. Iframes

Az Iframes (Inline Frames) egy régebbi, de még mindig életképes lehetőség a mikro-frontends izolálására. Minden mikro-frontend a saját iframe-jén belül fut, ami nagyfokú izolációt biztosít. Az iframe-ek közötti kommunikáció a postMessage API használatával érhető el.

Hogyan működik:

1. Minden mikro-frontend külön webalkalmazásként van telepítve.
2. A fő alkalmazás minden mikro-frontendet tartalmaz egy iframe-ben.
3. A fő alkalmazás és a mikro-frontends közötti kommunikáció a postMessage API használatával történik.

Példa (Iframes):

index.html (fő alkalmazás):

Main Application

Ebben a példában az index.html fájl két iframe-et tartalmaz, amelyek mindegyike egy másik mikro-frontendre mutat.

Előnyök:

• Nagyfokú izoláció. A mikro-frontends teljesen el vannak szigetelve egymástól, megakadályozva az ütközéseket.
• Könnyen megvalósítható. Az Iframes egy egyszerű és jól érthető technológia.

Hátrányok:

• Nehéz lehet kommunikálni az iframe-ek között.
• Teljesítményproblémák adódhatnak a több iframe miatti többletterhelés miatt.
• Rossz felhasználói élmény a zökkenőmentes integráció hiánya miatt.

Állapotkezelés a Mikro-Frontends között

Az állapotkezelés a mikro-frontends között az alkalmazások közötti navigáció kritikus szempontja. Több stratégia is alkalmazható:

• URL-alapú állapot: Az állapot kódolása az URL-ben. Ez a megközelítés az alkalmazás állapotát megoszthatóvá teszi az URL-eken keresztül, és könnyen könyvjelzővel elláthatóvá teszi.
• Központosított állapotkezelés (Redux, Vuex): Globális állapotkezelő könyvtár használata az állapot megosztására a mikro-frontends között. Ez különösen hasznos összetett alkalmazásoknál, ahol jelentős a megosztott állapot.
• Egyéni események: Egyéni események használata az állapotváltozások kommunikálására a mikro-frontends között. Ez a megközelítés laza csatolást tesz lehetővé a mikro-frontends között.
• Böngésző tároló (LocalStorage, SessionStorage): Az állapot tárolása a böngésző tárolójában. Ez a megközelítés egyszerű állapotokhoz alkalmas, amelyeket nem kell megosztani az összes mikro-frontend között. Ügyeljen azonban a biztonsági szempontokra az érzékeny adatok tárolásakor.

Hitelesítés és engedélyezés

A hitelesítés és az engedélyezés minden webalkalmazás kritikus szempontjai, és még fontosabbá válnak egy mikro-frontend architektúrában. Gyakori megközelítések a következők:

• Központosított hitelesítési szolgáltatás: Egy dedikált szolgáltatás kezeli a felhasználói hitelesítést, és tokeneket (pl. JWT) ad ki. A mikro-frontends ezután érvényesítheti ezeket a tokeneket a felhasználói engedélyezés meghatározásához.
• Megosztott hitelesítési modul: Egy megosztott modul felelős a hitelesítési logika kezeléséért. Ezt a modult az összes mikro-frontend használhatja.
• Edge hitelesítés: A hitelesítést a hálózat peremén kezelik (pl. fordított proxy vagy API átjáró használatával). Ez a megközelítés leegyszerűsítheti a hitelesítési logikát a mikro-frontends-ben.

Bevált módszerek a Mikro-Frontend Routinghoz

Íme néhány bevált módszer, amelyet érdemes szem előtt tartani a mikro-frontend routing megvalósításakor:

• Tartsa egyszerűen: Válassza ki a legegyszerűbb routing stratégiát, amely megfelel az Ön igényeinek.
• Válassza le a Mikro-Frontends-et: Minimalizálja a mikro-frontends közötti függőségeket a független fejlesztés és telepítés előmozdítása érdekében.
• Használjon következetes URL-struktúrát: Tartson fenn következetes URL-struktúrát az összes mikro-frontends-en, hogy javítsa a felhasználói élményt és a SEO-t.
• Valósítson meg lusta betöltést: Töltse be a mikro-frontends-et csak akkor, ha szükség van rájuk a teljesítmény javítása érdekében.
• Monitorozza a teljesítményt: Rendszeresen monitorozza a mikro-frontend alkalmazás teljesítményét, hogy azonosítsa és kezelje a szűk keresztmetszeteket.
• Hozzon létre egyértelmű kommunikációs csatornákat: Győződjön meg arról, hogy a különböző mikro-frontends-eken dolgozó csapatok egyértelmű kommunikációs csatornákkal rendelkeznek a fejlesztési erőfeszítések koordinálása és az integrációs problémák megoldása érdekében.
• Valósítson meg robusztus hibakezelést: Valósítson meg robusztus hibakezelést az egyes mikro-frontends hibáinak kecses kezelésére, és megakadályozza, hogy azok hatással legyenek a teljes alkalmazásra.
• Automatizált tesztelés: Valósítson meg átfogó automatizált tesztelést, beleértve az egységteszteket, az integrációs teszteket és a végpontok közötti teszteket, hogy biztosítsa a mikro-frontend alkalmazás minőségét és stabilitását.

Következtetés

A mikro-frontend routing egy összetett, de elengedhetetlen szempont a skálázható és karbantartható webalkalmazások építésében. A cikkben vázolt különböző routing stratégiák és bevált módszerek gondos mérlegelésével zökkenőmentes és felhasználóbarát élményt hozhat létre a felhasználók számára. A megfelelő megközelítés kiválasztása, legyen az egy központi router, mint a Single-Spa, a Module Federation, a Web Components vagy akár az Iframes, az Ön egyedi igényeitől és prioritásaitól függ. Ne feledje, hogy prioritást kell adni a leválasztásnak, a következetes URL-struktúráknak és a teljesítményoptimalizálásnak. Egy jól megtervezett routing stratégia megvalósításával felszabadíthatja a mikro-frontend architektúra teljes potenciálját, és valóban kivételes webalkalmazásokat építhet a globális közönség számára.